@charset "utf-8";
body{
  display: grid;
  grid-template-areas: 
  "header"
  "article"
  "footer";
  grid-template-rows: 10% 1fr 15%;
  grid-row-gap: 10px;
  height: 100vh;
}
header,article,footer{
  padding:1.2em;
  background-color:aliceblue ;
}
#header {
  grid-area: header;
  display: flex;
  flex-direction: row;
  justify-content:space-around;
  align-items: center;
  }
#header>img{
  width: 7%;
  padding: 0;
  margin: 0;
}
#article{
  grid-area: article;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#article>a{
  display: flex;
  align-items: center;
  height: 20%;
}
.items{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.img{
  display: flex;
  align-items: center;
  width: 40%;
}
.a{
  display: flex;
  align-items: center;
  width: 100%;
}
#footer {
  grid-area: footer;
  }
  #footer>ul{
  list-style: none;
  }
  #footer>ul>li{
    float: left;
    margin-left: 10px;
  }
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas:
        "header"
        "article"
        "footer";
      grid-template-rows: 80px 1fr 15%;  
      grid-template-columns: 1fr;
   }
  }